<!DOCTYPE html>
<html>
<head>
	<title>WebSocket Test</title>
</head>
<body>
	<h1>WebSocket Test</h1>
	<p>Status: <span id="status">disconnected</span></p>
	<button onclick="connect()">Connect</button>
	<button onclick="disconnect()">Disconnect</button>
	<br><br>
	<label for="message">Message:</label>
	<input type="text" id="message" placeholder="Enter message" disabled>
	<button onclick="send()">Send</button>
	<br><br>
	<ul id="messages"></ul>

	<script>
		var websocket;

		function connect() {

			websocket = new WebSocket("ws://127.0.0.1:80/ws/chat/");
			websocket.onopen = function(event) {
				document.getElementById("status").innerHTML = "connected";
				document.getElementById("message").disabled = false;
			};
			websocket.onclose = function(event) {
				document.getElementById("status").innerHTML = "disconnected";
				document.getElementById("message").disabled = true;
			};
			websocket.onmessage = function(event) {
				var li = document.createElement("li");
				li.innerHTML = event.data;
				document.getElementById("messages").appendChild(li);
			};
		}

		function disconnect() {
			websocket.close();
		}

		function send() {
			var message = document.getElementById("message").value;
			websocket.send(message);
			document.getElementById("message").value = "";
		}
	</script>
</body>
</html>